<template>
  <base-dialog
    ref="baseDialogRef"
    v-bind="$attrs"
    v-model="dialogStatus"
    confirm-text="确定"
    @confirm="handleConfirm"
    @cancel="handleCloseDialog"
  >
    <el-checkbox-group class="role-checkbox-group" v-model="curSelectRole" v-if="roleList.length">
      <el-checkbox class="checkbox-item" v-for="item in roleList" :key="item.id" :label="item">
        <span>{{ item.roleName }}</span>
        <el-tooltip :content="item.roleDesc" placement="bottom" :show-after="500">
          <base-icon class="ml4px" name="iconfont ic-wenhaobangzhu" :size="14" color="var(--ct3)" />
        </el-tooltip>
      </el-checkbox>
    </el-checkbox-group>
    <div class="center h250px" v-else>
      <base-empty description="暂无数据" />
    </div>
  </base-dialog>
</template>

<script setup>
  // dialog 组件实例
  const baseDialogRef = ref({});

  // dialog 弹窗状态
  const dialogStatus = ref(false);

  const props = defineProps({
    modelValue: {
      type: Array,
      default: () => [],
    },
    roleList: {
      type: Array,
      default: () => [],
    },
  });

  const emits = defineEmits(["update:modelValue"]);

  // 当前选中角色
  const curSelectRole = ref([]);

  // 点击确定
  const handleConfirm = () => {
    // 传递选中角色
    emits("update:modelValue", curSelectRole.value);
    // 关闭弹窗
    handleCloseDialog();
  };

  // 显示弹窗
  const handleShowDialog = () => {
    dialogStatus.value = true;
    curSelectRole.value = [...(props.modelValue || [])];
  };

  // 关闭弹窗
  const handleCloseDialog = () => {
    dialogStatus.value = false;
  };

  defineExpose({
    showDialog: handleShowDialog,
    closeDialog: handleCloseDialog,
  });
</script>
<style lang="scss" scoped>
  .role-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    height: 250px;
    gap: 0px 24px; // 使用 gap 统一控制间距

    .checkbox-item {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: var(--ct2);
      margin-right: 0px !important; // 覆盖 el-checkbox 默认的 margin-left
    }
  }
</style>
